<template>
  <div class="car-list">

  <div class="car-list-search-bar">
    <l-search-bar @change='select' :config='searchBarConfig'></l-search-bar>
  </div>

  
  <div class="page-content">
    <div class="logo-bar">
      <l-logo-bar :preinstall='currentLogo' @change='logoSelect' :config='getLogos'></l-logo-bar>
    </div>

    <div class="car-type-tab">
        <div  @click='() =>{selectType(item)}' :class='currentType === item.value ?  "car-type ative" : " car-type"'  v-for='(item, index) of carTypeTab'  :key='index' >
          {{item.label}}
        </div>
      
    </div>
    
    <i-row :gutter='20'>
        <i-col :sm='6' :xm='24' v-for='(item, index) of carList' :key='index'>
        <div class="car-item">
            <l-car-card  :info='item' ></l-car-card>
        </div>
        </i-col>
    </i-row>
    
    <div class="page-bar">
      <i-page @on-change='changePage' :current='currentPage' :total='pageTotal' :pageSize='pageSize' ></i-page>
    </div>
      
  </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import CarCard from '@/components/car_card/index.vue';
import ICarCard from '@/components/car_card/index.vue';
import SearchBar from '@/components/search_bar/index.vue';
import PageBar from '@/components/page_bar/index.vue';
import PagePath from '@/components/page_path/index.vue';
import LogoBar from '@/components/logo_bar/index.vue';


@Component({
  components:{
    'l-car-card': CarCard,
    'l-search-bar': SearchBar,
    'l-page-bar': PageBar,
    'l-page-path': PagePath,
    'l-logo-bar': LogoBar,

  }
})
export default class carMainList extends Vue {

  pageSize: number = 9
  currentPage: number = 0
  carList: Array<ICarCard> = [] 
  pageTotal: number = 1
  $API: any
  $globState: any
  searchBarConfig:any = []
  currentLogo: number = 0
  currentType: string = '私家车'
  
  carTypeTab:any = []

  created(){
    let initData = this.buildReq();

    this.getCarList(initData);
    this.searchBarConfig = deepCopy(this.$globState.searchConfig.car); 
    this.carTypeTab = deepCopy(this.$globState.searchConfig.catTab); 
    this.currentType = this.carTypeTab[0].value
  }

 get getLogos(){
     let logos = [];
     let searchBarConfig = this.searchBarConfig;

     if(searchBarConfig){
         for(let item of searchBarConfig){
             if(item.key === 'brand'){
                 logos = item.options;
                 break;
             }
         }
     }
    
     return logos
    
  }

//类型选择
selectType (data: any){
  
  this.currentType = data.value;
  let req = this.buildReq();
  this.getCarList(req);
  
}

//  logo联动
  logoSelect(data: any){
      let _this = this;
      let searchBarConfig = deepCopy(this.searchBarConfig);
      this.currentLogo = data.index
      searchBarConfig.forEach((item: any) =>{
          if(item.key === 'brand'){
              item.current = data.config[data.index]['value'];
          }
      })

      this.searchBarConfig = searchBarConfig

     // 初始化页号
      let req = this.buildReq({
        currentPage: 0,
      });

      this.getCarList(req)
  }


  changePage(pageNum:number){

        this.currentPage = pageNum;
        let initData = this.buildReq();
        this.getCarList(initData)

  }

  // 类型选择, 请求数据
  select(data:any){
      
      let _this = this;

      // 初始化页号
      let req = this.buildReq({
        currentPage: 0,
      });

     //  同步筛选值
      this.searchBarConfig = data.config;
    
     //  同步logo
      if(data.key === 'brand'){

            data.mod.options.forEach((i:any, index:number) =>{
                if(i.value === data.value){
                    _this.currentLogo = index;
                }
            })

      }
        
      this.getCarList(req)
  }

  buildReq(config={}){
    let req: any = {
      pageSize: this.pageSize,
      currentPage: this.currentPage,
      carType: this.currentType
    };
    
    this.searchBarConfig.forEach( (item: any) =>{
      req[item.key] = item['current'];
    })

    return Object.assign(req, config)

  }

  // 请求列表
  getCarList(req?:any){
    let $API:any = this.$API; 

    console.log(req);
    
    return $API.getCarList(req).then( (res: any) =>{
      this.carList = res.cars;
      this.pageTotal = res.pages.total;
    })
     
  }
  
};

// 深拷贝
function deepCopy(obj: any){
    let _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj);

    return objClone
}


</script>
<style scoped lang="less">

.car-list{

}
.logo-bar{
  padding: 0 0 10*@rem 0; 
}
.car-item{
  margin-bottom: 20*@rem;
}

.advertisement{
  height: 100%;
  background: #eee;
}

.car-type-tab{
  display: flex;
  justify-content: space-around;
  align-items: center;
  
  padding: 10*@rem 0 20*@rem ;
  border-top: 4*@rem solid @mainColor;

  .car-type{
    position: relative;

    padding-bottom: 30*@rem;
    font-size: @fontSizeLg;
    color: @mainColor;
    cursor: default;
    
  }

  .car-type.ative{

    &::before{
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;

      margin: auto;
      
      width: 0;
      height: 0;
      border-top: 10*@rem solid blue;
      border-bottom: 10*@rem solid transparent;
      border-left: 10*@rem solid transparent;
      border-right: 10*@rem solid transparent;
      
      
    }
  }
  

}

</style>
